//================通讯录代码================================
var contactTag=''; // 通讯录tag：  real || notreal
var sortTag=''; // 排序tag

/**
 * 初始化滚动
 */
mui('#pullrefresh1').scroll({
    deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
});

/**
 * 重置
 */
function contactReset(){
    var $table = document.body.querySelector('#pullrefresh1 .mui-table-view');
    $table.innerHTML='';
    mui('#pullrefresh').pullRefresh().refresh(true);
    loadContact()
}

/**
 *  加载通讯录
 */
function  loadContact() {
    var $table = document.body.querySelector('#pullrefresh1 .mui-table-view');
    setTimeout(()=>{
        for(var i=0;i<10;i++){
            var li = document.createElement('li');
            li.className = 'mui-table-view-cell mct';
            li.innerHTML = `<div class="mui-row">
                        <div class="mui-col-xs-9 detail_btn">
                            <div class="mui-row">
                                <div class="mui-col-xs-7 mct__name">陈鹏 V1</div>
                                <div class="mui-col-xs-5 mct_count">用户数:0(0)</div>
                            </div>
                            <div class="mct__phone">13032323321</div>
                            <div class="mct__date">注册时间：2019-07-15</div>
                        </div>
                        <div class="mui-col-xs-3 mui-navigate-right">
                            <div class="call"  title="13032323321">
                                <i class="fa fa-phone"></i>
                            </div>
                        </div>
                    </div>`;
            $table.appendChild(li)
            bindContactClick();
        }
    },500);
}

/**
 * 事件绑定
 */
function bindContactClick(){
    // 查看服务商业绩
    mui(".mui-row").on('tap','.detail_btn',function () {
        // 返回按钮
        mui("#backBtn")[0].style.display = 'none';
        mui("#prevBtn2")[0].style.display = 'block';
        // 通讯录
        mui("#segmentedControlbox")[0].style.display = 'none';
        mui(".filter")[0].style.display = 'none';
        mui("#pullrefresh1")[0].style.display = 'none';
        // 详情
        mui("#segmentedControlbox2")[0].style.display = 'block';
        mui("#pullrefresh")[0].style.display = 'block';
        mui("#detail")[0].style.display = 'none';
    });
    // 打电话
    mui('.mui-col-xs-3').on('tap',".call",function () {
        var phone = this.getAttribute('title');
        window.location.href = 'tel:'+phone
    })

}

mui.ready(function () {
    // createNav()
    // 加载通讯录
    loadContact();

    // 排序
    mui('.filter').on('tap','.filter__btn',function () {
        var $mask = mui('#mask')[0];
        var $filList = mui('.filter-list')[0];
        var className = this.className;
        console.log(className)
        if(className.indexOf('active') == -1){
            this.className='mui-text-right filter__btn active';
            $filList.style.display = 'block';
            $mask.style.display = 'block';
        }else{
            this.className='mui-text-right filter__btn ';
            $filList.style.display = 'none';
            $mask.style.display = 'none';
        }
    })
    // 选择排序
    mui('.filter-list').on('tap','li',function () {
        var $mask = mui('#mask')[0];
        var $fList = mui('.filter-list')[0];
        var $fBtn = mui('.filter__btn ')[0];
        var $list = mui('.filter-list li');
        var $type = mui('#type')[0];
        var tag = this.getAttribute('tag');
        $list.each((index,item)=>{
            console.log(index,item)
            mui(item)[0].className ='';
        })
        console.log(this.innerHTML);
        this.className = 'active';
        $fBtn.className ='mui-text-right filter__btn';
        $fList.style.display = 'none';
        $mask.style.display = 'none';
        $type.innerHTML = this.innerHTML;
        sortTag =tag;
    });

    // 通讯录切换
    mui("#segmentedControl").on("tap","a",function () {
        var tagIndex = this.getAttribute('tag'); // day || month
        console.log('tabs',tagIndex)
        contactTag = tagIndex;
        // 重置
        contactReset();
    })
});



//================服务商业绩代码================================
var pageTag='';  // 服务商业绩tag
var pageCount = 0;


mui.ready(function () {

    // 业绩列表 返回 通讯录列表
    mui(".mui-bar").on('tap','#prevBtn2',function () {
        // 返回按钮
        mui("#backBtn")[0].style.display = 'block';
        mui("#prevBtn2")[0].style.display = 'none';
        mui("#prevBtn3")[0].style.display = 'none';

        // 业绩列表
        mui("#segmentedControlbox2")[0].style.display = 'none';
        mui("#pullrefresh")[0].style.display = 'none';
        mui("#detail")[0].style.display = 'none';

        // 通讯录
        mui("#segmentedControlbox")[0].style.display = 'block';
        mui(".filter")[0].style.display = 'block';
        mui("#pullrefresh1")[0].style.display = 'block';
    })

    // 详情 返回 业绩列表
    mui('.mui-bar').on('tap','#prevBtn3',function () {
        // 返回按钮
        mui("#backBtn")[0].style.display = 'none';
        mui("#prevBtn2")[0].style.display = 'block';
        mui("#prevBtn3")[0].style.display = 'none';

        // 业绩列表
        mui("#detail")[0].style.display = 'none';
        mui("#segmentedControlbox2")[0].style.display = 'block';
        mui("#pullrefresh")[0].style.display = 'block';

    })

    // 通讯录切换
    mui("#segmentedControl2").on("tap","a",function () {
        var tagIndex = this.getAttribute('tag'); // day || month
        console.log('tabs',tagIndex)
        pageTag = tagIndex;
        // 重置
        detailReset();
    })
})

/**
 * 重置
 */
function detailReset(){
    pageCount = 0;
    var table = document.body.querySelector('#list-view');
    table.innerHTML='';
    mui('#pullrefresh').pullRefresh().refresh(true);
    pullupRefresh()
}


mui.init({
    pullRefresh: {
        container: '#pullrefresh',
        down: {
            style:'circle',
            callback: pulldownRefresh
        },
        up: {
            auto:true,
            contentrefresh: '正在加载...',
            callback: pullupRefresh
        }
    }
});


function pullupRefresh() {
    setTimeout(function() {
        mui('#pullrefresh').pullRefresh().endPullupToRefresh((++pageCount > 2)); //参数为true代表没有更多数据了。
        var table = document.body.querySelector('#list-view');
        var cells = document.body.querySelectorAll('#list-view .mui-table-view-cell');
        var newCount = cells.length>0?5:20;//首次加载20条，满屏
        for (var i = cells.length, len = i + newCount; i < len; i++) {
            var li = document.createElement('li');
            // li.className = 'mui-table-view-cell mui-media';
            // li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
            li.innerHTML =`<li class="month">
                <div class="mui-input-row mui-tit">
                    <span class="line"></span>
                    <label>2019-09-09</label>
                </div>
            </li>
            <li class="mui-navigate-right" tag="serviceCount">
                <div class="mui-input-row">
                    <label>服务商总数</label>
                    <span class="mui-pull-right">1</span>
                </div>
            </li>
            <li class="mui-navigate-right" tag="merchantCount">
                <div class="mui-input-row">
                    <label>商户总数</label>
                    <span class="mui-pull-right">1</span>
                </div>
            </li>
            <li class="mui-navigate-right" tag="today">
                <div class="mui-input-row">
                    <label>当日总交易额</label>
                    <span class="mui-pull-right">1</span>
                </div>
            </li>
            <li class="mui-navigate-right" tag="thismonth">
                <div class="mui-input-row">
                    <label>当月总交易额</label>
                    <span class="mui-pull-right">1</span>
                </div>
            </li>`;
            table.appendChild(li);
        }
        bindClick(li);
    }, 500);
}

function addData() {
    var table = document.body.querySelector('#list-view');
    var cells = document.body.querySelectorAll('#list-view .mui-table-view-cell');
    for(var i = cells.length, len = i + 5; i < len; i++) {
        var li = document.createElement('li');
        li.className = 'mui-table-view-cell';
        li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
        //下拉刷新，新纪录插到最前面；
        table.insertBefore(li, table.firstChild);
        bindClick(li);
    }
}
/**
 * 下拉刷新具体业务实现
 */
function pulldownRefresh() {
    setTimeout(function() {
        addData();
        mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
        mui.toast("为你推荐了5篇文章");
    }, 1000);
}

function bindClick(ele) {

    mui("#list-view").off("tap","li");
    mui("#list-view").on('tap',"li",function () {
        // console.log(this.getAttribute('tag'))
        var tag = this.getAttribute('tag'); // 4个判断标识
        console.log('tag',tag);
        // detail
        if(tag){
            // 返回按钮
            mui("#backBtn")[0].style.display = 'none';
            mui("#prevBtn2")[0].style.display = 'none';
            mui("#prevBtn3")[0].style.display = 'block';

            mui("#segmentedControlbox2")[0].style.display = 'none';
            mui("#pullrefresh")[0].style.display = 'none';
            mui("#detail")[0].style.display = 'block';
        }
    })
}